<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { Ivacc, setVacc, getVaList, delVacc } from "../../api/epi";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "../../store/user";
import { Scope } from "eslint-scope";
// pina
const store = useUserStore();
const { userid, username } = store;
// // 存储
const getVaccList = ref<Ivacc[]>([]);
const isFlag = ref<boolean>(false);
const getFlag = () => {
  if (userid) {
    isFlag.value = false;
  } else {
    isFlag.value = true;
  }
};
const form = ref<any>({
  userid,
  username,
  vaname: "",
  time: "",
  type: "",
  place: "",
  isSub: true,
  tel: "",
});
console.log(form);
const getVaccs = async () => {
  console.log(form);
  let res = await setVacc(form.value);
  console.log(res, "res");
  getVaccList.value = res.data;
  ElMessage({
    message: "预约成功",
    type: "success",
    duration: 2000,
  });
  form.value = {
    userid,
    username,
    vaname: "",
    time: "",
    type: "",
    place: "",
    isSub: true,
    tel: "",
  };
  getVaLists();
};
//查询
const getVacList = ref<Ivacc[]>([]);
const getVaLists = async () => {
  let res = await getVaList(userid);
  getVacList.value = res.data.filter((item: any) => item.isSub);
};
//验证规则
const rules = {
  tel: [
    { required: true, message: "手机号不能为空", trigger: "blur" },
    { min: 11, message: "手机号格式不正确", trigger: "blur" },
  ],
};
//删除按钮
const del = async (id: any) => {
  ElMessageBox.confirm("确定删除吗", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await delVacc(id);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      getVaLists();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
//判断预约时间
// :disabled="isDisable"
// const selectionChange = (from: any) => {
//     const setime = Date.getTime()
//     if (from.time > setime) isDisable.value = false
//     else isDisable.value = true
// }
// let isDisable = ref(true)
onMounted(() => {
  getVaLists();
  getFlag();
});
</script>
<template>
  <div class="flag" v-if="isFlag">请登陆后再浏览</div>
  <div v-else>
    疫苗预约
    <el-form :model="form" label-width="120px" :rules="rules">
      <el-form-item label="疫苗名称" class="input">
        <el-select v-model="form.vaname" placeholder="请选择接种疫苗">
          <el-option label="北京科兴" value="北京科兴" />
          <el-option label="长春生物" value="长春生物" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="手机号" class="input" prop="tel">
                        <el-input v-model="form.tel" placeholder="请输入手机号"
                        oninput="value=value.replace(/[^\d]/g,'');if(value.length > 11)value = value.slice(0, 11)"></el-input>
                   </el-form-item> -->
      <el-form-item
        label="接种地点"
        class="input"
        prop="place"
        style="width: 380px"
      >
        <el-input v-model="form.place"></el-input>
      </el-form-item>
      <el-form-item label="接种针数">
        <el-select v-model="form.type" placeholder="请选择接种次数">
          <el-option label="第一针" value="第一针" />
          <el-option label="第二针" value="第二针" />
          <el-option label="第三针" value="第三针" />
        </el-select>
      </el-form-item>
      <el-form-item label="预约时间">
        <el-col :span="11">
          <el-date-picker
            v-model="form.time"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="点击确认时间"
            style="width: 100%"
          />
        </el-col>
      </el-form-item>
      <el-form-item
        label="预留电话"
        class="input"
        prop="place"
        style="width: 380px"
      >
        <el-input v-model="form.tel"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getVaccs">提交预约</el-button>
      </el-form-item>
    </el-form>
    <div>
      疫苗预约信息
      <el-table
        :data="getVacList"
        stripe
        style="width: 100%"
        empty-text="暂无预约"
      >
        <el-table-column prop="vaname" label="疫苗名称" />
        <el-table-column prop="time" label="预约时间" />
        <el-table-column prop="place" label="接种地点" />
        <el-table-column prop="tel" label="手机号" />
        <el-table-column prop="type" label="接种针数" />
        <el-table-column label="取消预约" width="90">
          <template #default="scoped">
            <el-button type="danger" width="180" @click="del(scoped.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// .input {
//     // width: 300px;
// }

.areabox {
  display: flex;
  align-items: center;
}
.flag {
  font-size: 30px;
  font-weight: bolder;
  text-align: center;
  width: 100%;
  margin: 300px auto;
}
</style>
